<template>
	<view class="back-banner">

		<view class="header">
			<view class="userinfo">
				<view class="face" @tap="replaceAvatar">
					<image :src="userinfo.headIcon?'../../../static/head-img.png':userinfo.headIcon"></image>
				</view>

				<view class="info">
					<view class="u-flex u-row-between">
						<view class="username" v-if="userinfo.roleName=='信贷管家'">{{userinfo.realName}}</view>
						<view class="username" v-else>{{userinfo.nickName?userinfo.nickName:"未设置昵称"}}</view>
					</view>
					<view>
						<u-tag size="mini" class="u-m-r-10" v-for="item in userinfo.roleName.split(',')"
							:text="item"></u-tag>
					</view>
					<view class="u-flex u-row-between" v-if="userinfo.roleName.indexOf('合伙人')>-1">
						<view @tap="opendetail()">
							<text
								style="font-size: 46rpx; font-weight: 600; color: #009bff; margin-right: 6rpx;">{{userinfo.pointsPendingWithdrawal}}</text>
							<text> 积分</text>
						</view>
						<view class="u-flex u-row-between" style="margin-right: 30rpx;" @tap="togglePopup">
							<view class="iconfont icon-ym-erweima"></view>
							<view>邀请码</view>
						</view>
					</view>
				</view>


			</view>
			<!-- #ifdef APP-PLUS -->
			<view style="height: 140rpx;">
				<view class="icon-ym icon-ym-scanCode postname" style="color: #FFFFFF;font-size: 55rpx;"
					@tap="scanning()"></view>
			</view>

			<!-- #endif -->
		</view>

		<view class="userinfo_center">
			<view class="userstaff">
				<view class="staff" @tap="onBankInfo" v-if="userinfo.roleName.indexOf('合伙人')>-1">
					<view class="staffinfo border-bottom-E3E3E5" hover-class="uni-list-cell-hover">
						<view class="staffname"><text class="iconfont icon-cards"></text> <label>提现账户</label>
						</view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view class="staff" @tap="onUserInfo">
					<view class="staffinfo" hover-class="uni-list-cell-hover">
						<view class="staffname"><text class="iconfont icon-ym-userinfo"></text><label>基本信息</label>
						</view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>

			</view>
			<view class="userstaff">
				<view class="staff" @tap="onPartner" v-if="userinfo.roleName.indexOf('合伙人')>-1">
					<view class="staffinfo border-bottom-E3E3E5" hover-class="uni-list-cell-hover">
						<view class="staffname"><text class="iconfont icon-zuoyouduiqi"></text>
							<label>合伙人业务介绍</label>
						</view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view class="staff" @tap="contactUs">
					<view class="staffinfo border-bottom-E3E3E5" hover-class="uni-list-cell-hover">
						<view class="staffname"><text class="iconfont icon-zhanghaoanquan"></text><label>联系我们</label>
						</view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view class="staff" @tap="aboutUs">
					<view class="staffinfo border-bottom-E3E3E5" hover-class="uni-list-cell-hover">
						<view class="staffname"><text
								class="iconfont icon-ym-yingyongjieshao"></text><label>关于我们</label></view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view class="staff" @tap="accountSecurity">
					<view class="staffinfo  " hover-class="uni-list-cell-hover">
						<view class="staffname"><text class="iconfont icon-zhanghaoanquan"></text><label>账号安全</label>
						</view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
			</view>
			<view class="exit-btn">
				<view class="btn-exit" @click="defaultlogout" hover-class="uni-list-cell-hover">退出登录</view>
			</view>
		</view>


		<uni-popup type="center" mode="insert" :mask-click="true" ref="popup">
			<view class="popup-box" v-if="userinfo">
				<view class="us-info">
					<view class="info">
						<view class="usernike" style="text-align: center;">{{userinfo.realName}}</view>
					</view>
				</view>
				<view class="qrimg">
					<image width="100%" height="300rpx" :src="userinfo.shareImg" mode="widthFix"> </image>
				</view>
				<button style="margin-top:200rpx;" class="popup-btn cancel" @click="cancel()">关闭</button>
			</view>
		</uni-popup>

		<u-modal v-model="showFollow" title="关注提醒">
			<view class="slot-content">
				<view class="code-images">
					<image src="/static/qrcode_qygj.jpg"></image>
				</view>
				<view>关注九士数字管家服务号，获取最新通知</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	import helper from '@/common/js/helper.js'
	import config from '@/common/js/config.js'
	import uniPopup from '../extendModule/uni-popup/uni-popup.vue'
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			uniPopup,
			// tkiQrcode
		},
		data() {
			return {
				showFollow: false,
				userinfo: {
					roleName: ''
				},
				companyName: '',
				organizeName: '',
				cachesize: '',
				ifShow: true,
				val: '二维码', // 要生成的二维码值
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#ffffff', // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' // 二维码生成后的图片地址或base64
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			const _this = this;
			// #ifndef MP-ALIPAY
			uni.getStorageInfo({
				success: function(res) {
					_this.cachesize = helper.getfilesize(res.currentSize);
				}
			});
			// #endif
			_this.getSystemInfo()
		},
		onShow() {
			try {
				const userProvider = uni.getStorageSync(config.Global.cache + '_UserProvider');;
				let apiKey = uni.getStorageSync('apiKey') || 'api';
				let baseUrlObj = config.Global.baseUrl;
				let baseUrl = config.Global.baseUrl[apiKey].apiUrl;
				helper.ajax({
					url: '/api/App/Common/Login/App/CurrentUser',
					success: res => {
						let _data = res.data.data;
						uni.setStorage({
							key: config.Global.cache + '_UserProvider',
							data: _data.userInfo
						});
						this.userinfo = _data.userInfo
						this.userinfo.headIcon = baseUrl + this.userinfo.headIcon;
						if (this.userinfo.OpenId == '' || this.userinfo.IsFollow == false) {
							this.showFollow = true
						}
					},
				});
			} catch (e) {}
			uni.hideLoading();
		},
		methods: {
			...mapMutations(['logout']),
			getSystemInfo() {
				helper.ajax({
					url: '/api/System/SysConfig',
					method: 'GET',
					success: res => {
						config.Global.systemInfo = res.data.data
					}
				});
			},
			defaultlogout() {
				uni.showModal({
					// title: '提示',
					content: '确定退出当前账号吗？',
					success: (res) => {
						if (res.confirm) {
							helper.ajax({
								url: '/api/Common/Login/Logout',
								method: 'GET',
								data: '',
								complete: (e) => {
									this.$store.state.wschat.recentlys.length = 0;
									uni.removeStorage({
										key: config.Global.cache + '_Token',
									});
									uni.removeStorage({
										key: config.Global.cache + '_UserProvider',
									});
									uni.removeStorage({
										key: config.Global.cache + '_ApplyMenu',
									});
									uni.removeStorage({
										key: config.Global.cache + '_appsoftware_key'
									});
									uni.removeStorage({
										key: config.Global.cache + '_FlowEngineList'
									});
									uni.removeStorage({
										key: config.Global.cache + '_DictionaryList'
									});
									uni.removeStorage({
										key: config.Global.cache + '_OrganizeList'
									});
									uni.removeStorage({
										key: config.Global.cache + '_RoleList'
									});
									uni.removeStorage({
										key: config.Global.cache + '_PositionList'
									});
									uni.removeStorage({
										key: config.Global.cache + '_BannerList'
									});
									uni.removeStorage({
										key: config.Global.cache + '_ShowCompanyButton'
									});
									uni.removeStorageSync('apiKey');
									if (this.$store.state.wschat.socketState) {
										uni.closeSocket();
										this.$store.state.wschat.socketState = false;
									}
									this.isRouterAlive = false
									this.$nextTick(function() {
										this.isRouterAlive = true
									})
									this.logout();
									if (!this.islogin) {
										uni.reLaunch({
											url: '/pages/users/sign-in/sign-in',
										});
									}
								}
							});
						}
					},
				})
			},
			aboutUs() {
				uni.navigateTo({
					url: '../correlation/about-us/about-us',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			contactUs() {
				uni.navigateTo({
					url: '../correlation/contact-us/contact-us',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			mypartnerlist() {
				uni.navigateTo({
					url: '../../../pagesJiushi/partner/mypartnerlist/mypartnerlist',
					success: res => {},
					fail: (e) => {},
					complete: () => {}
				});
			},
			qrcodeus() {
				uni.navigateTo({
					url: '../correlation/qrcode-us/qrcode-us',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			accountSecurity() {
				uni.navigateTo({
					url: '../correlation/account-security/account-security',
				})
			},
			onUserInfo() {
				uni.navigateTo({
					url: '/pagesJiushi/user/userInfo',
				})
			},
			onBankInfo() {
				uni.navigateTo({
					url: '/pagesJiushi/user/bankInfo',
				})
			},

			onPartner() {
				uni.navigateTo({
					url: '/pagesJiushi/user/partnerDesc',
				})
			},


			/* 扫码事件 */
			scanning() {
				uni.scanCode({
					onlyFromCamera: false,
					/* 是否只能从相机扫码，不允许从相册选择图片 */
					success: function(res) {
						// console.log('条码内容：' + res.result);
						let scanResult = JSON.parse(res.result)
						scanResult.status = 'preview'

						if (scanResult.type == 'appDesignPreview') {
							uni.navigateTo({
								url: '../../apply/apply/features/index?id=' + scanResult.id +
									'&type=preview',
							})
						}
					}
				});
			},
			opendetail() {


				uni.navigateTo({
					url: '../../../pagesJiushi/user/pointDetail',
					success: res => {},
					fail: (e) => {},
					complete: () => {}
				});

			},
			replaceAvatar() {
				let apiKey = uni.getStorageSync('apiKey') || 'api';
				let baseUrlObj = config.Global.baseUrl;
				let baseUrl = config.Global.baseUrl[apiKey].apiUrl;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						try {
							const token = uni.getStorageSync(config.Global.cache + '_Token');
							if (token) {
								uni.uploadFile({
									url: baseUrl + '/api/Common/Uploader/userAvatar',
									filePath: res.tempFilePaths[0],
									name: 'file',
									formData: {
										"Authorize": token
									},
									success: (response) => {
										if (response.statusCode == 200) {
											let tempUrl = JSON.parse(response.data).data.url
											this.userinfo.headIcon = baseUrl + tempUrl;
										}
									},
									fail(err) {
										helper.msg('上传失败');
									}
								});
							}
						} catch (e) {}
					}
				})
			},
			togglePopup() {
				this.val = this.userinfo.account + '_' + this.userinfo.mobilePhone
				// // #ifndef APP-PLUS
				// uni.getImageInfo({
				// 	src: this.userinfo.headIcon,
				// 	success: res => {
				// 		this.icon = res.path;
				// 	}
				// });
				// // #endif
				// // #ifdef APP-PLUS
				// this.icon = this.userinfo.headIcon;
				// // #endif 
				this.$refs.popup.open();
			},
			cancel() {
				this.$refs.popup.close()
			},
			saveQrcode() {
				// #ifdef MP-ALIPAY
				this.$refs.popup.$refs.qrcode._saveCode()
				// #endif
				// #ifndef MP-ALIPAY
				this.$refs.qrcode._saveCode()
				// #endif
			},
			qrR(res) {
				this.src = res;
			},
			ifQrcode() {
				this.ifShow = !this.ifShow
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #EEF0F3
	}

	.back-banner {
		position: relative;
		background-position: top;
		// background-size: 100% 25%;
	}

	.slot-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;

		.code-images {
			image {
				width: 560rpx;
				height: 560rpx;
			}
		}
	}

	.header.status {
		padding-top: var(--status-bar-height);
	}

	.header {
		background-color: #3281ff;
		display: flex;
		flex-direction: row;
		// justify-content: space-between;

		width: 100%;
		box-sizing: border-box;
		height: 368upx;
		margin-bottom: -90upx;

		.userinfo {
			width: 100%;
			display: flex;
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			justify-content: space-between;
			margin: 130rpx 24rpx 0;

			.face {
				flex-shrink: 0;
				width: 16vw;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
				height: 16vw;
				margin-right: 30rpx;
				margin-top: -50rpx;
				margin-left: 30rpx;
				background: #fff;
				width: 100px;
				/*设置你需要的宽度*/
				height: 100px;
				/*设置你需要的高度，通常与度相同以形成正方形*/
				overflow: hidden;
				/*隐藏超出容器的部分*/
				border-radius: 50%;

				/*设置边框园角为50%，形成园形**/
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%
				}
			}

			.info {
				display: flex;
				flex-direction: column;
				flex: 1;

				.username {
					width: 100%;
					font-size: 36rpx;
					font-weight: bolder;
					font-weight: normal;
					font-weight: bolder;
					margin-top: 30rpx;
				}

				.usernike {
					display: flex;
					align-items: center;
					height: 40upx;
					font-size: 28rpx;
					border-radius: 20upx;
				}
			}
		}

		.setting {
			flex-shrink: 0;
			width: 6vw;
			color: #9A9A9A;
		}
	}

	.hover {
		background-color: #eee
	}

	.userinfo_center {
		display: flex;
		flex-direction: column;
		margin-top: 100rpx;
		border-radius: 20rpx;
	}

	.userstaff {
		width: 95%;
		margin: 20rpx auto 0;
		overflow: hidden;
		border-radius: 20rpx;

		.staff {
			width: 100%;
			height: 96rpx;
			display: flex;
			background-color: #fff;
			align-items: center;

			.staffinfo {
				width: 91%;
				font-size: 28rpx;
				display: flex;
				vertical-align: hiddle;
				margin-left: 30rpx;
				align-items: center;
				justify-content: space-between;

				.staffname {
					width: 60%;
					display: flex;
					// flex-flow: wrap;
					white-space: nowrap;
					align-items: center;
					color: #3A3A3A;
					font-size: 32rpx;

					// font-weight: bolder;
					& .iconfont {
						color: #3281ff;
						width: 52rpx;
						font-size: 38rpx;
						text-align: center;
						font-weight: normal;
						margin-right: 10rpx;
					}
				}

				.iconfont {
					color: #9A9A9A;
					width: auto;
				}

				.postname {
					width: 75%;
					flex-shrink: 0;
					// height: 6vw;
					text-align: right;
					color: #9A9A9A;
				}
			}
		}
	}

	.formgroup {
		padding-left: 40upx;
	}

	.controlvalue {
		width: 68% !important;
	}

	.btnlogout {
		color: #FF0000;
		background-color: #fff;
		border: 0;
		font-weight: 600
	}

	button::after {
		border: none;
	}

	.exit-btn {
		width: 95%;
		height: 90rpx;
		margin: 20rpx auto;
		border-radius: 20rpx;
		overflow: hidden;
		border: 1rpx solid #eee;

		.btn-exit {
			height: 100%;
			line-height: 90rpx;
			font-size: 32rpx;
			color: #3281ff;
			background: #fff;
			text-align: center;

		}
	}

	.popup-box {
		background-color: #fff;
		width: 554upx;
		height: 800upx;
		border-radius: 10upx;
		padding: 34upx 56upx 0;
		box-sizing: border-box;

		.us-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 70upx;
			margin-bottom: 10upx;

			.face {
				height: 60upx;
				width: 60upx;
				border-radius: 50%;
				margin-right: 28upx;
			}

			.info {
				flex: 1;
				display: flex;
				flex-direction: column;

				.username,
				.usernike {
					line-height: 35upx;
				}

				.username {
					color: #252B3A;
					font-size: 28upx;
				}

				.usernike {
					color: #666666;
					font-size: 24upx;
				}
			}

		}

		.qrimg {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-bottom: 10upx;
		}

		.popup-btn {
			margin-bottom: 32upx;
			background-color: #fff;
			color: #3281FF;
			border: 1upx solid #3281FF;
			box-sizing: border-box;

		}

		.popup-btn.btn-save {
			background-color: #3281FF;
			color: #fff;
		}
	}
</style>